<template>
  <div class="cgjhadd">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <div class="contain">
        <div class="left">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础设置" name="1" id="jichu">
              <div class="form-box">
                <el-form-item label="费用周期" prop="feeCycle" >
                  <el-date-picker :disabled="disabledPark"
                    clearable
                    size="small"
                    v-model="meterQuery.feeCycle"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择费用周期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="园区" prop="parkNum">
                  <el-select :disabled="disabledPark" clearable v-model="meterQuery.parkNum" placeholder="请选择园区">
                    <el-option
                      v-for="item in buiParkList"
                      :key="item.id"
                      :label="item.parkNum"
                      :value="item.parkNum"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item title="水费" name="2" id="shuifei">
              <div class="collapse-item-box">
                <div class="form-box">
                  <el-form-item label="水费单价" prop="waterUnitPrice">
                    <el-input
                      v-model="form.waterUnitPrice"
                      placeholder="请输入单价"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>

                </div>

                <div class="fttt">分摊设置</div>
                <el-form-item prop="wMonthShareVOList" label-width="0">
                  <el-table :data="form.wMonthShareVOList" border>
                    <el-table-column prop="meterNum" label="仪表"> </el-table-column>
                    <el-table-column prop="meterName" label="仪表名称"> </el-table-column>
                    <el-table-column prop="shareInitialValue" label="分摊池初始值">
                    </el-table-column>
                    <el-table-column prop="monthShare" label="当月分摊">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.monthShare"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </div>

            </el-collapse-item>
            <el-collapse-item title="电费" name="3" id="dianfei">
              <div class="collapse-item-box">
                <div class="form-box">
                  <el-form-item label="电费单价" prop="elUnitPrice">
                    <el-input
                      v-model="form.elUnitPrice"
                      placeholder="请输入单价"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>

                </div>

                <div class="fttt">分摊设置</div>
                <el-form-item prop="elMonthShareVOList" label-width="0">
                  <el-table :data="form.elMonthShareVOList" border>
                    <el-table-column prop="meterNum" label="仪表"> </el-table-column>
                    <el-table-column prop="meterName" label="仪表名称"> </el-table-column>
                    <el-table-column prop="shareInitialValue" label="分摊池初始值">
                    </el-table-column>
                    <el-table-column prop="monthShare" label="当月分摊">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.monthShare"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right">
          <div class="my-steps-box">
            <div
              :class="['step-item', stepSelect == index ? 'step-active' : '']"
              v-for="(item, index) in step"
              :key="index"
            >
              <div class="top-title" @click="jump(item.to, index)">
                <div class="cricle"></div>
                <span class="text">{{ item.text }}</span>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-foot-fixed">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  listFeStandard,
  getFeStandard,
  delFeStandard,
  addFeStandard,
  updateFeStandard,
  listTotalCheckMater,
  createFeeBill,
} from "@/api/smartParks/operatingFee/electricity";
import { listBuiPark } from "@/api/parkAssets/enterCommunity";
export default {
  name: "electricityAdd",
  data() {
    return {
      form:{
        elMonthShareVOList:[],
        wMonthShareVOList:[]
      },
      disabledPark:false,
      activeNames: ["1", "2", "3", "4", "5"],
      step: [
        {
          to: "jichu",
          text: "基础设置",
        },
        {
          to: "shuifei",
          text: "水费",
        },
        {
          to: "dianfei",
          text: "电费",
        }
      ],
      stepSelect: 0,
      meterQuery:{
        parkNum:null,
        feeCycle:null
      },
      buiParkList:[],
      // 表单校验
      rules: {
        elUnitPrice: [
          { required: true, message: "电费单价不能为空", trigger: "blur" }
        ],
        waterUnitPrice: [
          { required: true, message: "水费单价不能为空", trigger: "blur" }
        ],
      },
      standerId:null,

    };
  },
  watch:{
    meterQuery:{
      handler(newVal,oldVal){
        console.log(newVal)
        //新增，选择园区，费用周期；
        if (!this.isEmpty(newVal.parkNum)&&!this.isEmpty(newVal.feeCycle)&&this.isEmpty(this.standerId)){
          this.getMeters()
        }
      },
      deep:true
    }
  },
  beforeRouteEnter:(to,from,next) => {
    if(to.query.id == null) {
      to.meta.title = '新增水电收费标准'
    }else {
      to.meta.title = '修改水电收费标准'
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch("tagsView/delView", this.$route);
    next();
  },
  created() {
    let id=this.$route.query.id
    console.log("id",id)
    this.standerId=id
    listBuiPark().then((response) => {
      this.buiParkList = response.rows;
    });
    //更新标准，查询
    if (!this.isEmpty( id)){
      this.disabledPark = true;
      getFeStandard(id).then((response) => {
        this.form = response.data;
        this.meterQuery={
          parkNum:response.data.parkNum,
          feeCycle:response.data.feeCycle
        };
        //this.form.wMonthShareVOList =
        //this.form.monthShareVOList=[]
        // this.form.checkMeterVOList.forEach((element) => {
        //   let obj = {
        //     meterId: element.meterId,
        //     meterNum: element.meterNum,
        //     shareInitialValue: element.shareInitialValue||'0',
        //     monthShare: element.monthShare||'0',
        //     checkMaterId: element.checkMaterId,
        //   };
        //   this.form.monthShareVOList.push(obj);
        // })
        //this.open = true;

      });
    }

  },
  methods: {
    jump(domId, index) {
      this.stepSelect = index;
      //页面滚动了的距离
      let height =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let dom = document.getElementById(domId);
      // let domHeight = dom.offsetTop + 60;
      let domHeight = dom.offsetTop - 104;
      //滚动距离计算
      var S = Number(height) - Number(domHeight);
      //判断上滚还是下滚
      if (S < 0) {
        //下滚
        S = Math.abs(S);
        window.scrollBy({
          top: S,
          behavior: "smooth",
        });
      } else if (S == 0) {
        //不滚
        window.scrollBy({
          top: 0,
          behavior: "smooth",
        });
      } else {
        //上滚
        S = -S;
        window.scrollBy({
          top: S,
          behavior: "smooth",
        });
      }
    },
    getMeters(){
      this.form.wMonthShareVOList=[]
      this.form.elMonthShareVOList=[]
      listTotalCheckMater({
        parkNum: this.meterQuery.parkNum,
        feeCycle: this.meterQuery.feeCycle,
        meterType: '水表',
      }).then((res) => {
        res.data.forEach((element) => {
          let obj = {
            meterId: element.meterId,
            meterNum: element.meterNum,
            meterName:element.meterName,
            shareInitialValue: element.shareInitialValue||'0',
            monthShare: element.monthShare||'0',
            checkMaterId: element.checkMaterId,
          };
          this.form.wMonthShareVOList.push(obj);
        });
      });

      listTotalCheckMater({
        parkNum: this.meterQuery.parkNum,
        feeCycle: this.meterQuery.feeCycle,
        meterType: '电表',
      }).then((res) => {
        if (res.data.length>0){
          res.data.forEach((element) => {
            let obj = {
              meterId: element.meterId,
              meterNum: element.meterNum,
              meterName:element.meterName,
              shareInitialValue: element.shareInitialValue||'0',
              monthShare: element.monthShare||'0',
              checkMaterId: element.checkMaterId,
            };
            this.form.elMonthShareVOList.push(obj);
          });
        }

      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.parkNum=this.meterQuery.parkNum
      this.form.feeCycle=this.meterQuery.feeCycle
      this.buiParkList.find(item =>{
        if(item.parkNum == this.form.parkNum){
          this.form.parkId = item.id
        }
      })

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateFeStandard(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.returntomenu()
            });
          } else {
            addFeStandard(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.returntomenu()
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parkNum: null,
        elUnitPrice: null,
        waterUnitPrice: null,
        meterType: null,
        feeCycle: null,
        fixedFee: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        wMonthShareVOList: [],
        elMonthShareVOList: []
      };

      this.meterQuery={
        parkNum:null,
        feeCycle:null
      }
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.returntomenu()
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-select,
.el-date-editor {
  width: 100%;
}
.big-foot-fixed {
  text-align: center;
  padding-bottom: 20px;
}
.cgjhadd {
  overflow: hidden;
  background: #f7f8f8;
  min-height: calc(100vh - 84px);
  height: auto;
  .top {
    height: 40px;
    box-sizing: border-box;
    background: #409eff !important;
    color: #fff;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: space-between;
    .submit {
      padding: 3px 10px;
      border-radius: 10px;
      background: #fff;
      color: #409eff;
      cursor: pointer;
      margin-right: 100px;
    }
  }
}

.contain {
  height: auto !important;
  margin: 20px 20px 0px 20px;
  padding-bottom: 20px;
  display: flex;
  .left {
    .text-height {
      height: 80px;
      ::v-deep .el-form-item__content {
        height: 80px;
      }
    }
    .lrAbout {
      display: flex;
      justify-content: space-between;
    }
    width: 90%;
    ::v-deep .el-collapse {
      border-bottom: 0px;
    }
    ::v-deep .el-collapse-item {
      background: #fff;
      font-size: 12px;
      margin-bottom: 20px;

      .el-collapse-item__header,
      .el-collapse-item__wrap {
        background: "";
      }

      .el-collapse-item__header {
        position: relative;
        height: 44px;
        padding-left: 20px;
      }

      .el-collapse-item__header:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 18px;
        background-color: #409eff;
        left: 0;
        top: 13px;
      }

      .el-collapse-item__wrap {
        border-top: 1px solid #e6ebf5;
      }

      .el-collapse-item__content {
        padding-top: 25px;
      }
      .form-box1 {
        width: 100%;
        padding: 0 20px;
        .el-button {
          margin-top: 10px;
        }
        .el-button:first-child {
          margin-top: -10px;
        }
        .el-table {
          margin-top: 10px;
        }
      }
      .form-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;

        .el-form-item {
          width: 48%;
        }

        .el-form-item__label {
          font-size: 12px;
          font-weight: normal;
        }

        .el-form-item:nth-child(2n) {
          margin-left: 4%;
        }
      }
    }

    ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    ::v-deep .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .right {
    width: 10%;

    .my-steps-box {
      font-size: 12px;
      position: fixed;
      right: 30px;
      // top: 104px;
      .step-item {
        margin-bottom: 30px;
        position: relative;
        .top-title {
          display: flex;
          cursor: pointer;
          .cricle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
            background: #e8eaec;
            box-sizing: border-box;
            // background: red;
            border: 2px solid #f7f8f8;
          }
        }
        .line {
          position: absolute;
          width: 2px;
          height: 30px;
          top: 12px;
          left: 5px;
          background: #e8eaec;
        }
      }
      .step-item.step-active {
        .cricle {
          border: 2px solid #d5e7f9;
          background-color: #2d8cf0;
        }
        .text {
          color: #2d8cf0;
        }
      }
      .step-item:nth-last-child(1) .line {
        display: none;
      }
    }
  }
}

.collapse-item-box{
  width: 100%;
  padding: 0 20px;
}

.fttt{
  margin-left: 20px;
  margin-bottom: 10px;
  width: 60px;
  text-align: right;
  vertical-align: middle;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: normal;
}
</style>
